<!--
 * @Author: your name
 * @Date: 2021-08-06 16:35:22
 * @LastEditTime: 2021-08-08 15:10:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui\src\views\XianQuList.vue
-->
<template>
    <div class="XianQuList">
        <!-- 头部 -->
        <Header></Header>
        <!-- /头部 -->
        <div class="content">
            <div class="article" v-if="article">
                <div class="head">当前位置:{{article.category?article.category.name:'无'}}</div>
                <div class="title">{{article.title}}</div>
            </div>
            <div class="info">
                作者:{{article.baseuser?article.baseUser.realname:'匿名'}}&nbsp;&nbsp;&nbsp;
                发布时间:{{article.publishTime | fmtDate}}&nbsp;&nbsp;&nbsp;
                阅读次数:{{article.readTimes}}
            </div>
            <el-divider></el-divider>
            <div class="listconte" v-html="article.content"></div>
             
        </div>
       
        <!-- 底部 -->
        <Footer></Footer>
        <!-- 底部 -->
    </div>
</template>
<script>
import Header from './components/Header'
import Footer from './components/Footer'
import {get} from '../utils/request'
export default {
    components:{
        Header,Footer
    },
    data(){
        return{
            id:0,
            article:''
        }
    },
     created(){
        this.id=this.$route.query.id
        this.loadCarousel()
    },
    methods:{
        loadCarousel(){
      let url="/index/article/findById"
       get(url,{id:this.id}).then(res => {
        this.article=res.data;
      })
      },
      
    },
}
</script>

<style lang="scss" scoped>
.XianQuList{
    
    .content{
        
        .article{
            .head{
                background-color: #fafafa;
                color:#999;
                font-size: 12px;
                padding-left: 1px;
                margin: 10px auto 0 auto;
                cursor: pointer;
            }
            .title{
                font-size: 30px;
                font-weight: normal;
                text-align: center;
                padding: 5px 0 12px 0;     
            }
            .info{
                padding: 0 0 1em;
                width: 80%;
                margin: 0 auto;
                border-bottom: 1px solid #fff;
                margin-bottom: .1em;
                text-align: center;
            }
           
            
        } .listconte {
                width: 80%;
                text-align: center;
                padding: 0 10%;
                font-size: 18px;
                line-height: 36px
                
            } 
    }
}
</style>